import Vue from 'vue'

new Vue({
  el: '#root',
  template: `
    <div>
      <p> Name: {{ name }} </p>
      <p> Name: {{ getName() }} </p>
      <p> Number: {{ number }} </p>
      <p>FullName: {{ fullName }} </p>
      <p>FirstName: <input type="text" v-model = "firstName"> </p>
      <p>LastName: <input type="text" v-model = "lastName"> </p>
      <p> <input type="text" v-model = "number"> </p>
      <p>Obj.a <input type="text" v-model = "obj.a"> </p>
    </div>
  `,
  data: {
    firstName: 'Milly',
    lastName: 'Liu',
    number: 0,
    fullName: '',
    obj: {
      a: '123'
    }
  },
  computed: {
    name () {
      console.log('new name')
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    'obj.a': {
      handler () {
        console.log('obj.a changed')
      },
      immediate: true
    }
  },
  methods: {
    getName () {
      console.log('getname')
      return `${this.firstName} ${this.lastName}`
    }
  }
})
